<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb
      separator-class="el-icon-arrow-right"
      style="margin-bottom:20px"
    >
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>控制台</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 数据汇总统计 -->
    <div class="count">
      <div
        v-for="item in count"
        :key="item.name"
      >
        {{item.name}} {{item.num}}
      </div>
    </div>
    <!-- 统计图 -->
    <el-button
      :type="mapType?'success':'primary'"
      @click="mapType=!mapType"
    >{{mapType?'柱状图':'折线图'}}</el-button>
    <!-- 调用折线统计图 -->
    <template v-if="saleCount.length!==0">
      <!-- 折线图 -->
      <LinePic
        :data="saleCount"
        title="近7日销售量变动情况统计"
        v-if="mapType"
      ></LinePic>
      <!-- 柱状图 -->
      <Bar
        id="bar"
        :data="saleCount"
        title="近7日销售量变动情况统计"
        v-if="!mapType"
      ></Bar>
      <!-- 饼状图 -->
      <Pie
        :data="sexCount"
        title="会员性别分布情况"
        v-if="sexCount.length!==0"
      ></Pie>
      <!-- 地图标注 -->
      <Map
        id="map1"
        :mapData="mapData"
        :data="collegeCount"
        v-if="mapData !==null && collegeCount.length >0"
      ></Map>
      <Map
        id="map2"
        :mapData="mapData"
        :data="accessCount"
        :min="5"
        :max="500"
        :color="['skyblue','green','red']"
        formatter="{b}<br/>{c}次"
        title="访问来源分布情况"
        subTitle="数据来源:访问日志"
        v-if="mapData !==null && accessCount.length >0"
      ></Map>
    </template>
  </div>
</template>

<script>
import url from '@/config/url'
// 导入统计图组件
import LinePic from '@/components/LinePic.vue'
import Bar from '@/components/Bar.vue'
import Pie from '@/components/Pie.vue'
import Map from '@/components/Map.vue'
export default {
  components: {
    LinePic,
    Bar,
    Pie,
    Map
  },
  data() {
    return {
      count: [],
      saleCount: [],
      sexCount: [],
      // true 折线图  false柱状图
      mapType: true,
      // 地图坐标数据
      mapData: null,
      // 高校分布情况数据
      collegeCount: [],
      // 访问来源数据
      accessCount: []
    }
  },
  created() {
    this.loadCount()
    this.loadSaleCount()
    this.loadSexCount()
    this.loadMapData()
    this.loadCollegeCount()
    this.loadAccessCount()
  },
  mounted() {},
  methods: {
    // 统计汇总数据
    loadCount() {
      this.$http.get(url.count).then((res) => {
        // console.log(res.data)
        this.count = res.data
      })
    },
    // 销售量数据
    loadSaleCount() {
      this.$http.get(url.saleCount).then((res) => {
        // console.log(res.data)
        this.saleCount = res.data
      })
    },
    // 会员性别分布情况
    // 销售量数据
    loadSexCount() {
      this.$http.get(url.sexCount).then((res) => {
        // console.log(res.data)
        this.sexCount = res.data
      })
    },
    // 加载地图经纬度轮廓
    loadMapData() {
      this.$http.get(url.china).then((res) => {
        console.log(res)
        this.mapData = res.data[0]
      })
    },
    // 高校分布情况
    loadCollegeCount() {
      // 请求数据
      this.$http.get('https://api.i-lynn.cn/college').then((res) => {
        // console.log(res)
        /***  处理数据结构  {area:xxx,counts:xxx}   {name:xxxx,value:xxx} */
        let tmp = []
        res.data.data.list.forEach((item) => {
          // console.log(item)
          let obj = {}
          obj.name = item.area
          obj.value = item.counts
          tmp.push(obj)
        })
        // console.log(tmp);
        this.collegeCount = tmp
      })
    },
    // 访问量分布情况
    loadAccessCount() {
      this.$http.get(url.accessCount).then((res) => {
        this.accessCount = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.count {
  margin-top: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: white;
  display: flex;
  justify-content: space-around;
  > div {
    width: 150px;
    height: 150px;
    line-height: 150px;
    color: white;
    text-align: center;
    border-radius: 50%;
  }
  > div:first-child {
    background-color: red;
  }
  > div:nth-child(2) {
    background-color: #409eff;
  }
  > div:nth-child(3) {
    background-color: #67c23a;
  }
  > div:nth-child(4) {
    background-color: #f56c6c;
  }
  > div:nth-child(5) {
    background-color: #909399;
  }
}
</style>